<template>
  <div>
    <div class="main-div">
        
        <keep-alive>
            <!-- 缓存加载过的界面 -->
      <router-view />
        </keep-alive>
    </div>

    <van-tabbar  v-model="active" @change="changeTabbar(active)">
      <van-tabbar-item icon="shop">首页</van-tabbar-item>
      <van-tabbar-item icon="records">列表页</van-tabbar-item>
      <van-tabbar-item icon="cart">购物车页</van-tabbar-item>
      <van-tabbar-item icon="contact">会员中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      nowpath: ""
    };
  },
  created() {
    this.upcartpath();
  },
  updated(){
    this.upcartpath()
  },
  methods: {
    //根据active的激活值判断路径
    changeTabbar(active) {
      switch (active) {
        case 0:
          this.$router.push({ name: "ShoppingMall" });
          break;
        case 1:
          this.$router.push({ name: "CategoryList" });
          break;
        case 2:
          this.$router.push({ name: "Cart" });
          break;
        case 3:
          this.$router.push({name:'Number'})
          break;
      }
    },
    //时时更新购物车路径
    upcartpath() {
      this.nowpath = this.$route.path;
      if (this.nowpath == "/cart") {
        this.active = 2;
      }
    }
  }
};
</script>

<style  scoped>
van-tabbar-item--active{
    position: fixed;
}
</style>